html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    vertical-align: baseline
}

html {
    background: #181a1b;
}

body {
    line-height: 1;
    color: #000;
    /* background: #fff */
    background: #181a1b;
}

ol, ul {
    list-style: none
}

table {
    border-collapse: separate;
    border-spacing: 0;
    vertical-align: middle
}

caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle
}

a {
    text-decoration: inherit
}

a:hover {
    text-decoration: underline
}

a img {
    border: none
}

* {
    box-sizing: border-box
}

* {
    transition: all .25s
}

body {
    overflow-x: hidden;
    padding: 1.5rem 1.5rem 5.9375rem 1.5rem;
    font-family: 'HanHei SC', 'PingFang SC', 'Helvetica Neue', 'Helvetica', 'STHeitiSC-Light', 'Arial', sans-serif
}

a {
    transition: all .25s;
    text-decoration: initial
}

a:hover {
    text-decoration: initial
}

.github-corner:hover .octo-arm {
    -webkit-animation: octocat-wave 560ms ease-in-out;
    animation: octocat-wave 560ms ease-in-out
}

.hide {
    display: none
}

.show {
    display: block
}

.error h2 {
    font-weight: bold
}

.header {
    padding: 1.125rem 0 .9375rem 0;
    font-size: .75rem
}

.header .logo {
    float: left
}

.header .logo h1 {
    display: none
}

.header .logo:before {
    content: '';
    min-width: 18.125rem;
    height: 2.5rem;
    display: inline-block;
    background: url("../img/logo.svg") top left no-repeat;
    background-size: contain
}

.header:after {
    content: '';
    display: block;
    clear: both
}

.header .right {
    text-align: right;
    line-height: 2.5rem;
    color: #717171
}

.header .right a {
    color: #717171
}

.header .right a:hover {
    color: #0500e8
}

.header .right .box {
    background: #eaeaea;
    display: inline-block;
    padding: 0 .625rem;
    line-height: 1.4375rem;
    border-radius: .3125rem;
    font-size: .75rem

    background-image: initial;
    background-color: rgb(36, 39, 40);
}

.header .right .box i {
    color: #000;
    font-weight: bold;
    font-style: inherit
}

.header .view-type, .header .view-type-list {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-style: normal;
    text-align: left;
    text-indent: -9999px;
    direction: ltr;
    color: #717171;
    width: .125rem;
    height: .125rem
}

.header .view-type:before, .header .view-type-list:before, .header .view-type:after, .header .view-type-list:after {
    content: '';
    pointer-events: none
}

.header .view-type {
    box-shadow: 0 -4px 0, -4px -4px 0, 4px -4px 0, 0 0 0 32px inset, -4px 0 0, 4px 0 0, 0 4px 0, -4px 4px 0, 4px 4px 0;
    margin: -.125rem .4375rem 0 .4375rem
}

.header .view-type-list {
    box-shadow: inset 0 0 0 25px, 0 -4px 0 0, 0 4px 0 0;
    margin: .125rem .75rem .25rem .125rem
}

.header .view-type-list:before {
    width: .5rem;
    height: .125rem;
    left: .25rem;
    box-shadow: inset 0 0 0 25px, 0 -4px 0 0, 0 4px 0 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.header .preview {
    display: inline-block;
    cursor: pointer
}

.header .preview:hover .view-type, .header .preview:hover .view-type-list {
    color: #0500e8
}

.header .preview:active .view-type, .header .preview:active .view-type-list {
    color: #f00
}

.sitelist .kw {
    color: #f00;
    font-style: inherit
}

.sitelist li {
    padding: .3125rem .3125rem;
    position: relative
}

.sitelist li:after {
    content: '';
    display: block;
    border-bottom: 1px solid #eee;
    margin-top: .625rem;
    border-bottom-color: rgb(53, 57, 59);
}

.sitelist li .title {
    padding-left: .3125rem;
    margin-right: .625rem;
    float: left;
    font-size: .875rem
}

.sitelist li .title a {
    font-weight: bold;
    /* color: #000 */
    color: rgb(232, 230, 227);
}

.sitelist li .title a:hover {
    color: #f00
}

.sitelist li .title img {
    height: .875rem;
    width: .875rem;
    vertical-align: middle;
    margin: -.125rem .25rem 0 0;
    border-radius: .1875rem;
    background-color: #e8e8e8
}

.sitelist li .description {
    padding: .125rem .3125rem 0 .3125rem;
    line-height: 1.3;
    display: block;
    font-size: .75rem;
    clear: both
}

.sitelist li .tags {
    font-size: .625rem;
    float: right
}

.sitelist li .tags span {
    display: inline-block;
    /* background-color: #d6d6d6; */
    background-color: rgb(47, 51, 53);
    color: rgb(232, 230, 227);
    padding: 0 .1875rem 0 .1875rem;
    line-height: 1rem;
    border-radius: .1875rem;
    /* color: #fff; */
    margin: 0 1px
}

.sitelist li .des {
    color: #848484
}

.sitelist ul:after {
    content: '';
    display: block;
    clear: both
}

.sitelist .more {
    text-align: center;
    padding: .3125rem;
    font-size: .75rem
}

.sitelist .more a {
    display: inline-block;
    background: #818aa2;
    color: #fff;
    padding: 0 .3125rem;
    border-radius: 3ox;
    line-height: 1.125rem
}

.sitelist .more a:hover {
    background: #4e5873;
    color: #fff
}

.sitelist .more a:active {
    background: #1d1f27
}

.sitelist #tags {
    padding: .3125rem .3125rem
}

.sitelist #tags span {
    font-size: .75rem;
    display: inline-block;
    margin: .1875rem;
    padding: .25rem .3125rem;
    border-radius: .1875rem;
    /* background-color: #e5e5e5; */
    background-color: rgb(39, 42, 44);
    color: #bfc8e0;
    cursor: pointer
}

.sitelist #tags span:hover {
    /* background-color: #bfc8e0 */
    background-color: #923441
}

.sitelist #tags span:active {
    background: #98acff
}

.list-itme-grid li {
    width: 25%;
    float: left;
    overflow: hidden;
    /* padding: .9375rem */
    /* padding: 0 */
}

/* .list-itme-grid li:after {
    margin-top: 1.25rem
} */

.list-itme-grid li .title {
    white-space: nowrap;
    float: initial
}

.list-itme-grid li .title h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.list-itme-grid li .tags {
    padding: .625rem 0 0 .25rem;
    float: inherit;
    height: 1.625rem;
    overflow: hidden
}

.list-itme-grid li .description {
    height: 2rem
}

.list-itme-grid li .description .des {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden
}

.search {
    position: absolute;
    bottom: 0;
    left: 0
}

.search input {
    position: fixed;
    bottom: -.125rem;
    left: 0;
    z-index: 10;
    font-size: 2.5rem;
    padding: .9375rem 1.875rem;
    font-family: inherit;
    font-weight: 100;
    border: none;
    outline: none;
    /* background: rgba(255, 255, 255, 0.95); */
    background: #181a1b;
    width: 100%
}

.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    padding: 0;
    margin: 0;
    margin-left: -.75rem;
    display: block;
    background-color: transparent;
    border-radius: 50%
}

@media screen and (max-width:479px) {
    .header .right {
        text-align: center
    }
    .header .box {
        margin: .5625rem 0 0 .4375rem
    }
    .header .logo {
        float: initial;
        text-align: center;
        display: inherit
    }
    .header .logo:before {
        min-width: 9.4375rem
    }
    .search input {
        font-size: 1.125rem;
        padding: .9375rem .625rem
    }
    body {
        padding: .9375rem 0 3.4375rem 0
    }
    .list-itme-grid li {
        width: 100%;
        padding: .3125rem
    }
    .list-itme-grid li:after {
        margin-top: .5625rem
    }
    .header .preview {
        display: none
    }
}

@-webkit-keyframes octocat-wave {
    0%, 100% {
        transform: rotate(0)
    }
    20%, 60% {
        transform: rotate(-25deg)
    }
    40%, 80% {
        transform: rotate(10deg)
    }
}

@keyframes octocat-wave {
    0%, 100% {
        transform: rotate(0)
    }
    20%, 60% {
        transform: rotate(-25deg)
    }
    40%, 80% {
        transform: rotate(10deg)
    }
}